<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人才市场列表</title>
    <script src="util.js"></script>
    <script src="req.js"></script>
    <script src="flexible.min.js"></script>
    <style>
        * {
            background-color: #eee;
            font-size: 20px;
        }

        table {
            background-color: #fff;
            width: 100%;
            text-align: center;
        }

        img {
            width: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th>商品</th>
                    <th>价格 <img id="img1" onclick="fn_data(1)" src="img/square_down.png" alt=""> </th>
                    <th>数量 <img id="img2" onclick="fn_data(0)" src="img/square_down.png" alt=""></th>
                    <th>供货商</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var xdata;
        var cont = 0;
        var flag1 = true;
        var flag2 = true;
        function html_data(el) {
            var data = "";
            el.forEach(e => {
                data += `<tr>
                    <td>${e.materialName}</td>
                    <td>${e.price}</td>
                    <td>${e.num}</td>
                    <td>${e.content}</td>
                </tr>`;
            });
            $('tbody').html(data)
        }
        $(function () {
            JQ('http://192.168.1.101:8085/Interface/index/getMaterial').then(e => {
                console.log(e.data);
                xdata=e.data
                html_data(xdata);
            })
        })
        function fn_data(id) {
            $('#img1').attr('src', 'img/square_down.png')
            $('#img2').attr('src', 'img/square_down.png')
            if (id) {
                if (flag1) {
                    $('#img1').attr('src', 'img/square_up.png')
                    xdata.sort(function (a, b) {
                        return a.price-b.price
                    })
                    html_data(xdata)
                    flag1 = false;
                } else {
                    $('#img1').attr('src', 'img/square_down.png')
                    xdata.sort(function (a, b) {
                        return b.price-a.price
                    })
                    html_data(xdata)
                    flag1 = true;
                }

            } else {
                if (flag2) {
                    $('#img2').attr('src', 'img/square_up.png')
                    xdata.sort(function (a, b) {
                        return a.num-b.num
                    })
                    html_data(xdata)
                    flag2 = false;
                } else {
                    $('#img1').attr('src', 'img/square_down.png')
                    xdata.sort(function (a, b) {
                        return b.num-a.num
                    })
                    html_data(xdata)
                    flag2 = true;
                }
            }
        }
    </script>
</body>

</html>